 <template>
  <div>
    <span>
      <el-button type="success" @click="Create()"> 添加 </el-button>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select v-model="values" placeholder="商品分类">
        <el-option
          v-for="item in optionss"
          :key="item.ProTypeID"
          :label="item.ProTypeName"
          :value="item.ProTypeID"
        >
        </el-option>
      </el-select>
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="na"
        clearable
      >
      </el-input>
      <el-button @click="xian()">查询</el-button>
    </span>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="ProID" label="商品主键"> </el-table-column>
      <el-table-column prop="ProName" label="商品名称"> </el-table-column>
      <el-table-column prop="ProTypeName" label="分类名称"> </el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scopes">
          <el-image
            style="width: 100px; height: 100px"
            :src="scopes.row.Img"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="Sales" label="销量"> </el-table-column>
      <el-table-column prop="Sort" label="排序"> </el-table-column>
      <el-table-column label="上下架">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="uptsta(scope.row.ProID)"
          >
            {{ scope.row.State == 1 ? "下架" : "上架" }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="CreateTime" label="创建时间"> </el-table-column>
      <el-table-column prop="Info" label="内容"> </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <span
            ><el-button
              @click="upt(scope.row.ProID)"
              type="primary"
              plain
              size="mini"
              icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button
              @click="del(scope.row.ProID)"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              plain
              >删除</el-button
            >
            <el-button type="success" size="mini" icon="" plain
              >一键复制</el-button
            ></span
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

   <script>
export default {
  data() {
    return {
      //获取到上下架下拉框值
      value: "",

      //获取到商品类别下拉框值
      values: "",

      //名称

      na: "",

      //显示数据
      tableData: [],

      //上下架下拉款数据
      options: [
        {
          value: "1",
          label: "上架",
        },
        {
          value: "0",
          label: "下架",
        },
      ],

      //商品类别下拉款数据
      optionss: [],
    };
  },

  mounted() {
    this.xian();
  },

  methods: {
    //显示
    xian() {
      this.axios
        .get(
          "https://localhost:44375/api/Product/GetProducts?Sta=" +
            this.value +
            "&&Tid=" +
            this.values +
            "&&Na=" +
            this.na
        )
        .then((response) => {
          console.log(response.data.data.Result);
          this.tableData = response.data.data.Result;
          this.op();
        });
    },

    //下拉框数据填写
    op() {
      this.axios
        .get(
          "https://localhost:44375/api/ProductType/GetProductTypes?pageIndex=1&pageSize=99"
        )
        .then((response) => {
          this.optionss = response.data.data.Result;
        });
    },

    //修改上下架状态
    uptsta(Id) {
      this.axios
        .post("https://localhost:44375/api/Product/UptState?Id=" + Id)
        .then((response) => {
          if (response.data.data == 1) {
            this.$message({
              message: "成功!",
              type: "success",
            });
          } else {
            this.$message.error("失败!");
          }
          location.reload();
        });
    },

    //删除
    del(Id) {
      this.axios
        .post("https://localhost:44375/api/Product/IsDel?Id=" + Id)
        .then((response) => {
          if (response.data.data == 1) {
            this.$message({
              message: "成功!",
              type: "success",
            });
          } else {
            this.$message.error("失败!");
          }
          location.reload();
        });
    },

    //跳转添加页面
    Create() {
      this.$router.push("/Product/ProductCreate");
    },
    upt(id) {
      this.$router.push({ name: "ProductEdit", query: { Id: id } });
    },
  },
};
</script>